import { Toast, NavBar, Cell, Image, Popup ,Picker} from 'react-vant';
import { useNavigate } from 'react-router-dom';
import React, { useState } from 'react';
import CSS from './myPl.module.css'
export default function Personal() {
    const navigate = useNavigate();
    const handeClickLeft = () => {
        navigate(-1)
    }
    const [state, setState] = useState(false)
    const columns = [
        {text:"男",value:"0"},
        {text:"女",value:"1"}
    ]
    const src = 'https://img.yzcdn.cn/vant/cat.jpeg'
    return <>
        <div>
            <NavBar
                title="个人资料编辑"
                onClickLeft={handeClickLeft}
            />
        </div>
        <div>
            <div className={CSS.per}>
                <Image width='100' height='100' src={src} />
            </div><p style={{ textAlign: 'center' }}>点击更换头像</p><br /><br />
            <Cell title='昵称' isLink value='赵志勇' />
            <Cell title='性别' isLink value='男' onClick={() => setState(true)} />
            <Cell title='手机号' isLink value='未绑定' />
            <Popup
                visible={state}
                style={{ height: '40%' }}
                position='bottom'
                onClose={() => setState(false)}
                
            >
                <Picker
                    title='基础使用'
                    columns={columns}
                    onCancel={() => setState(false)}
                    onConfirm={() => setState(false)}
                />
            </Popup>
        </div>

    </>
}